<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生管理</title>

    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/style.min.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>


    <script type="text/javascript" src="../js/bootstrap.min.js"></script>

    <script type="text/javascript" src="../js/bootstrap-table/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

</head>
<body>
<div class="container-fluid p-t-15">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="container">
                    <div class="row clearfix">
                        <div class="col-md-12 column">
                            <h3 class="text-center text-info">
                                数据查询系统
                            </h3>

                            <a id="modal-179978" href="#modal-container-179978" role="button" class="btn text-right"
                               data-toggle="modal">触发遮罩窗体</a>

                            <div class="modal fade" id="modal-container-179978" role="dialog"
                                 aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                ×
                                            </button>
                                            <h4 class="modal-title" id="myModalLabel">
                                                标题
                                            </h4>
                                        </div>
                                        <div class="modal-body">
                                            内容...
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                            </button>
                                            <button type="button" class="btn btn-primary">保存</button>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>


                </div>
                <div class="card-body">
                    <div id="toolbar" class="toolbar-btn-action" style="margin-bottom: 3%">
                        <form class="form-inline">
                            <div class="form-group">
                                <label class="sr-only" for="sname">学生姓名</label>
                                <input class="form-control mb-2 mr-sm-2" type="text" id="sname" name="sname"
                                       placeholder="请输入学生姓名">
                            </div>
                            <div class="form-group">
                                <label class="sr-only" for="age">学生姓名</label>
                                <input class="form-control mb-2 mr-sm-2" type="text" id="age" name="sname"
                                       placeholder="请输入学生年龄">
                            </div>
                            <div class="form-group">
                                <a class="btn btn-success" style="margin-left:20px;margin-top:-3px"
                                   onclick="searchStudent()">
                                    <i class="fa fa-search"></i> 查询
                                </a>
                            </div>
                        </form>
                    </div>
                    <div style="overflow:scroll;">
                        <table id="studentTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="alert alert-success alert-dismissible">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong>成功!</strong> 指定操作成功提示信息。
    </div>
</div>

<script>


$(document).ready(function() {
//1.初始化Table
 new TableInit();
});
//初始化表格
var TableInit = function () {
//先销毁表格
$('#studentTable').bootstrapTable("destroy");
//初始化
$('#studentTable').bootstrapTable({
classes: 'table table-bordered table-hover table-striped',
url: '/studentManage/studentAll',
method: 'get',
dataType : 'json',        // 因为本示例中是跨域的调用,所以涉及到ajax都采用jsonp,
uniqueId: 'id',
idField: 'id',             // 每行的唯一标识字段
toolbar: '#toolbar',       // 工具按钮容器
clickToSelect: true,     // 是否启用点击选中行
showColumns: true,         // 是否显示所有的列
showRefresh: true,         // 是否显示刷新按钮

//showToggle: true,        // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)

pagination: true,                    // 是否显示分页
sortOrder: "asc",                    // 排序方式
queryParams: queryParam,                                   // 传递参数
sidePagination: "server",            // 分页方式：client客户端分页，server服务端分页
pageNumber: 1,                       // 初始化加载第一页，默认第一页
pageSize: 10,                        // 每页的记录行数
pageList: [10, 25, 50, 100],         // 可供选择的每页的行数
//search: true,                      // 是否显示表格搜索，此搜索是客户端搜索
//responseHandler:responseHand,//请求数据成功后，渲染表格前的方法
//showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
//exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据
columns: [{
field: 'example',
checkbox: true    // 是否显示复选框
}, {
title: '序号',//标题  可不加
align: "center",
formatter: function (value, row, index) {
return index + 1;
},
align: "center",
width: 50
},
{
field: 'id',
title: 'ID',
align: "center",
width: 200
},
{
field: 'sname',
title: '学生姓名',
align: "center"
},
{
field: 'age',
title: '年龄',
align: "center"
}]
});
return TableInit;
}


//得到查询的参数
function queryParam(params) {
var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
pageNumber: Math.round((params.offset + params.limit) / params.limit),
pageSize: params.limit,
//账号
sname: $("#sname").val(),
age: $("#age").val()
};
return temp;
}

function  searchStudent() {
    new TableInit();
}





</script>

</body>
</html>